<template>
    <div class="calendar" id="CalendarElement">
    </div>
</template>

<script setup lang="ts">
    import { Calendar,  EventClickArg, EventContentArg } from '@fullcalendar/core';
    import dayGridPlugin from '@fullcalendar/daygrid';
    import interaction, { DateClickArg } from '@fullcalendar/interaction';
    import { EventItem } from './types';
    import {deepClone} from "wangeditor/dist/utils/util";
    import text from "wangeditor/src/config/text";

    const props = defineProps({
        local: {
            type: String,
            default: 'zh-cn'
        },
        // 视图模式
        initialView: {
            type: String,
            default: 'dayGridMonth'
        },
        // 按钮文字
        buttonText: {
            type: Object,
            default: () => {
                return {
                    today: '今天',
                    month: '月',
                    week: '周',
                    day: '日',
                    prevYear: '上一年',
                    nextYear: '下一年',
                    prev: '上一月',
                    next: '下一月'
                }
            }
        },
        // 头部工具栏
        headerToolbar: {
            type: Object,
            default: () => {
                return {
                    start: 'title',
                    center: '',
                    end: 'prev today next'
                }
            }
        },
        // 底部工具栏
        footerToolbar: {
            type: Object
        },
        // 日历事件
        events: {
            type: Array as PropType<EventItem[]>,
            default: () => []
        },
        displayEventEnd: {
            type: Boolean,
            default: false
        },
        eventContent: {
            type: Function
        }
    })
    let emits = defineEmits(['date-click', 'event-click'])
    const calendar = ref<Calendar>()
    const renderCalendar = () => {
        let el = document.getElementById('CalendarElement')
        if (el) {
            calendar.value = new Calendar(el, {
                plugins: [dayGridPlugin, interaction],
                locale: props.local,
                initialView: props.initialView,
                buttonText: props.buttonText,
                headerToolbar: props.headerToolbar,
                footerToolbar: props.footerToolbar,
                eventSources: [
                    {
                        // 生成事件
                        events(e, callback) {
                            if (props.events.length) callback(props.events)
                            else callback([])
                        }
                    }
                ],
                dateClick(info: DateClickArg) {
                    // console.log(info)
                    emits('date-click', info)
                },
                // 点击日历上的时间
                eventClick(info: EventClickArg) {
                    // console.log('eventClick', info)
                    emits('event-click', info)
                },
                displayEventEnd: props.displayEventEnd,
                eventContent: props.eventContent
            })
            calendar.value.render()
        }
    }

    onMounted(() => {
        renderCalendar()
    })

    watch(() => props.events, val => {
        console.log(val)
        renderCalendar()
    }, {
        deep: true
    })
</script>

<style scoped lang="scss">

</style>
